<template>
  <view>

    <!-- 选择收货地址的盒子 -->
    <view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
      <button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">
        请选择收货地址+
      </button>
    </view>

    <!-- 渲染收货信息的盒子 -->
    <view v-else @click="chooseAddress">
      <uni-section title="收货信息" titleFontSize="18px" padding="0 0 5px 10px">
        <template #decoration>
          <view class="decoration"></view>
        </template>
        <view class="address-container">
          <view class="address-container-left">
            <content-layout iconType="person" :iconSize="18" label="收货人" :content="address.userName"/>
            <content-layout iconType="phone" :iconSize="18" label="电话" :content="address.telNumber"/>
            <content-layout iconType="map" :iconSize="18" label="收货地址" :content="addstr"/>
        </view>
        <view class="address-container-right">
          <uni-icons type="arrowright" size="28" class="arrow-right"></uni-icons>
        </view>
    </view>
    </uni-section>
    <image src="/static/cart_border@2x.png" class="address-border"></image>
  </view>

  </view>
</template>

<script>
import {
  mapState,
  mapMutations,
  mapGetters
} from 'vuex'
import ContentLayout from "@/components/my-address/components/content-layout.vue";

export default {
  name: "my-address",
  components: {ContentLayout},
  data() {
    return {
      // address: {}
      iconSpan: 2,
      labelSpan: 5,
      valueSpan: 17
    };
  },
  methods: {
    ...mapMutations('m_user', ['updateAddress']),
    //选择收货地址
    chooseAddress() {
      // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
      uni.chooseAddress({
        success: (result) => {
          // 2. 用户成功的选择了收货地址
          this.updateAddress(result)
        },
        fail: (err) => {
          //根据最新规则, 微信官方已取消授权, 可以直接调用对应接口
          //参照: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
          // 	if (err && err.errMsg === 'chooseAddress:fail auth deny') {
          // 		//调用this.reAuth() 方法, 向用户重新发起授权申请
          // 		this.reAuth()
          // 	}
        }
      })
    },
    // async reAuth() {
    // 	const [err2, confirmResult] = await uni.showModal({
    // 		content: '检测到您没打开地址权限, 是否去设置打开?',
    // 		confirmText: '确认',
    // 		cancelText: '取消'
    // 	})

    // 	//如果弹框异常, 则直接退出
    // 	if (err2) {
    // 		return
    // 	}

    // 	//如果用户点击了"取消"按钮, 则提示用户
    // 	if (confirmResult.cancel) {
    // 		return uni.$showMsg('您取消了地址授权!')
    // 	}

    // 	//如果用户点击了"确认"按钮, 则进入授权页面, 让用户重新进行授权
    // 	if (confirmResult.confirm) {
    // uni.openSetting({
    // 	success: (settingResult) => {
    // 		if (settingResult.authSetting['scope.address']) {
    // 			return uni.$showMsg('授权成功! 请选择收货地址')
    // 		} else {
    // 			return uni.$showMsg('您取消了地址授权!')
    // 		}
    // 	}
    // })
  },
  computed: {
    ...mapState('m_user', ['address']),
    ...mapGetters('m_user', ['addstr'])
  }
}
</script>

<style lang="scss" scoped>
//底部边框线的样式
.address-border {
  display: flex;
  width: 100%;
  height: 5px;
}

//选择收货地址的盒子
.address-choose-box {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decoration {
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background-color: #18bc37;
}

.address-container {
  display: flex;
  justify-content: space-between;

  .address-container-right {
    // flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
  }
}

// white-space: nowrap;
</style>